<template>
  <div class="bigbox">
     <!-- 搜索栏盒子 -->
     <div class="topbox">
      <div class="forms">
        <el-form ref="form" label-position="left" label-width="80px">
        <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect 
                      ref="yonghu" 
                      :optionlist="yonghulist" 
                      :valuekey="{name:'name',value:'id'}"
                      @changeselect="changeqite"
                      :defaultvalue="companyId"
                      ></FilterSelect>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="年份">
                  <el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="选择年" size="small" style="width:100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="能源类型">
                  <el-select v-model="energyTypeId" placeholder="请选择能源类型"  size="small" style="width:100%;" @change="$forceUpdate()">
                    <el-option v-for="(item,index) in leixinglist" :key="index" :label="item.energyTypeName" :value="item.energyTypeId" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" class="chongzhi" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" class="button" @click="getdatalist()">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      </div>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <div class="titlebox">
        <div>能源价格信息配置</div>
        <div class="butti">
          <span style="display: flex;">
            <el-button type="primary" size="small" @click="dialogVisible=true"><i class="el-icon-plus"></i>模版新增</el-button>
            <TopTooltip @shuaxin="shuaxin" @command="command"></TopTooltip>
          </span>
        </div>
      </div>
       <div class="tablebox">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="150">
            <template #default="{row}">
                 <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                     <i @click="putlist(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <i @click="dellist(row)" class="el-icon-delete" style="color: red;cursor: pointer;"></i>
                </el-tooltip>
            </template>
          </el-table-column>
        </TableColumn>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageobj.pageNo"
            :page-size="15"
            @current-change="getdatalist"
            :total="+totalCount">
          </el-pagination>
        </div>
        <!-- 弹窗 -->
        <div class="dialog">
          <el-dialog
          title="价格方案维护"
          :visible.sync="dialogVisible"
          :show-close="false"
          width="45%">
          <div slot="title">价格方案维护<span style="float: right;font-size: 18px;padding: 0 10px;cursor: pointer;" @click="quxiao">
            <i class="el-icon-close"></i> </span>
          </div>
          <div>
            <el-form :model="form" label-position="right" label-width="120px" ref="formdata">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用电单位" prop="companyId">
                    <el-select v-model="form.companyId" placeholder="请选择用电单位"  size="small" style="width: 100%;">
                      <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年份" prop="year" >
                    <el-date-picker v-model="form.year" type="year" value-format="yyyy" placeholder="选择年" size="small" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="能源类型/介质" prop="energyTypeId">
                    <el-select v-model="form.energyTypeId" placeholder="请选择能源类型"  size="small" style="width: 100%;" @change="$forceUpdate()">
                      <el-option v-for="(item,index) in leixinglist" :key="index" :label="item.energyTypeName" :value="item.energyTypeId" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="方案名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入方案名称" size="small" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="单价类型" prop="unitPriceType">
                    <el-select v-model="form.unitPriceType" placeholder="请选择单价类型" style="width: 100%;" size="small"  @change="$forceUpdate()">
                      <el-option v-for="(item,index) in danjialist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="12" v-if="form.unitPriceType=='01'">
                   <el-form-item label="单一价格">
                    <el-input v-model="priceJson.singleUnitPrice" placeholder="请输入单一价" size="small" style="width: 100%;"></el-input>
                   </el-form-item>
                </el-col>
                <div class="dianjiamoban" v-else>
                  <div class="danyi">阶梯价格:</div>
                  <div class="muban">
                    <div class="alittlebox" >
                      <div class="title">
                        <div class="twobai">阶梯</div>
                        <div class="fourbai">用量范围</div>
                        <div class="threebai">单价</div>
                      </div>
                      <div class="xiangqing">
                        <div class="twobai">第一阶梯:</div>
                        <div class="fourbai">
                          <el-input v-model="priceJson.step1UsageStart" placeholder="单行输入" size="small" style="width: 47%;"></el-input>
                          <span>~</span>
                          <el-input v-model="priceJson.step1UsageEnd" placeholder="单行输入" size="small" style="width: 47%;"></el-input>
                        </div>
                        <div class="threebai"><el-input v-model="priceJson.step1UnitPrice" placeholder="请输入单价" size="small" style="width: 100%;"></el-input></div>
                      </div>
                      <div class="xiangqing">
                        <div class="twobai">第二阶梯:</div>
                        <div class="fourbai">
                          <el-input v-model="priceJson.step2UsageStart" placeholder="单行输入" size="small" style="width: 47%;"></el-input>
                          <span>~</span>
                          <el-input v-model="priceJson.step2UsageEnd" placeholder="单行输入" size="small" style="width: 47%;"></el-input>
                        </div>
                        <div class="threebai"><el-input v-model="priceJson.step2UnitPrice" placeholder="请输入单价" size="small" style="width: 100%;"></el-input></div>
                      </div>
                      <div class="xiangqing">
                        <div class="twobai">第三阶梯:</div>
                        <div class="fourbai">
                          <el-input v-model="priceJson.step3UsageStart" placeholder="单行输入" size="small" style="width: 47%;"></el-input>
                          <span>~</span>
                          <el-input v-model="priceJson.step3UsageEnd" placeholder="单行输入" size="small" style="width: 47%;"></el-input>
                        </div>
                        <div class="threebai"><el-input v-model="priceJson.step3UnitPrice" placeholder="请输入单价" size="small" style="width: 100%;"></el-input></div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button class="button" @click="quxiao">取 消</el-button>
            <el-button class="button" type="primary" @click="submit">确 定</el-button>
          </span>
        </el-dialog>
        </div>
       </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import TableColumn from '@/components/Table/index.vue'
import TopTooltip from '@/components/TopTooltip/index.vue'
import {getzidianxialaapi} from '@/api/guidelines'
import {getyongdianlistapi} from '@/api/energy-consumption/Basic-information/medium'
import {gettypeandjiezhilistapi,getjiageweihulistapi,addjiagepeizhiapi,deldanjiapeizhiapi,putdanjiapeizhiapi} from '@/api/energy-consumption/Basic-information/FillReport'
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn,
    TopTooltip,
    FilterSelect
  },
  data() {
    return {
      form:{},
      dialogVisible:false,
      companyId: '',
      year: '',
      energyTypeId: '',
      yonghulist:[],
      leixinglist: [],
      issize: 'medium',
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '100' },
        { label: '单位名称', prop: 'companyName',  },
        { label: '年份', prop: 'year', center: 'center' },
        { label: '能源类型/能源介质', prop: 'energyTypeName',},
        { label: '单位', prop: 'energyUnit', },
        { label: '单价类型', prop: 'unitPriceTypeName',},
        { label: '方案名称', prop: 'name',},
      ],
      totalCount: '',
      pageobj: {
        pageNo: 0,
        pageSize:15
      },
      danjialist:[],
      priceJson:{}
    };
  },

  async mounted() {
    // 获取用电单位
    const {data:{list}} = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?+companyId:'')
    // 获取能源类型并筛选
    const res = await gettypeandjiezhilistapi()
    this.leixinglist = res.data.list
    this.getdatalist()
    // 获取单价类型
    const ress = await getzidianxialaapi({ dictType: 'UnitPriceType' })
    this.danjialist = ress.data.list
    this.form.unitPriceType=ress.data.list[0].value
  },

  methods: {
    changeqite(val) {
      this.$set(this,'companyId',val)
      localStorage.setItem('companyId', val)
    },
    // 弹窗确定
    async submit() {
      const priceJson=JSON.stringify(this.priceJson)
      this.form.id?await putdanjiapeizhiapi({...this.form,priceJson}).then(res => {
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message:res.code == 200 ?'修改成功':res.message
        })
        this.quxiao()
        this.getdatalist()
      }): await addjiagepeizhiapi({...this.form,priceJson}).then(res => {
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message:res.code == 200 ?'新增成功':res.message
        })
        this.quxiao()
        this.getdatalist()
      })
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
      const { data: { list, totalCount } } = await getjiageweihulistapi({
        pageNo: this.pageobj.pageNo - 1,companyId:this.companyId,energyTypeId:this.energyTypeId,
        pageSize: this.pageobj.pageSize,year:this.year,
      })
      this.tableData = list
      this.totalCount=totalCount
      this.$refs.tabledata.loading = false
    },
    // 修改
    putlist(row){
      this.form={...row}
      this.priceJson=JSON.parse(row.priceJson)
      this.dialogVisible=true
    },
    // 弹窗取消
    quxiao() {
      this.dialogVisible = false
      this.priceJson={}
      this.form={}
      this.$refs.formdata.resetFields()
    },
    // 重置
    chongzhi() {
      this.companyId = ''
      this.energyTypeId = ''
      this.year = ''
      this.getdatalist()
    },
    // 删除
    dellist(row){
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deldanjiapeizhiapi({ id: row.id }).then(res => {
            this.$message({
              type: res.code == 200 ? 'success' : 'warning',
              message:res.code == 200 ?'删除成功':res.message
            })
          })
          this.getdatalist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
           // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 列表刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
  },
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .topbox{
    height: 80px;
    background-color: #fff;
    margin-bottom: 10px;
    padding:  20px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .titlebox{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti{
        display: flex;
      }
    }
    .tablebox{
      height: 88%;
      .fenye{
        text-align: end;
        margin-top: 10px;
      }
      .dialog{
        .button{
          width: 60px;
          height: 30px;
        }
        .dianjiamoban{
          width: 100%;
          display: flex;
          align-items: center;
          margin-top: 15px;
          .danyi{
            width: 15%;
          }
          .muban{
            width:85%;
            .ouhou{
              display: flex;
              align-items: center;
              .jiage{
                width: 15%;
                text-align: center;
              }
            }
            .alittlebox{
              margin-top: 15px;
              .title{
                display: flex;
                margin-bottom: 15px;
                .twobai{
                  width: 15%;
                  text-align: center;
                }
                .fourbai{
                  width: 55%;
                  text-align: center;
                }
                .threebai{
                  width: 30%;
                  text-align: center;
                }
              }
              .xiangqing{
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                .twobai{
                  width: 15%;
                text-align: center;
                }
                .fourbai{
                  width: 55%;
                }
                .threebai{
                  width: 30%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>